دورة شاملة في HTML

الدرس الأول: مقدمة في HTML

HTML هي لغة ترميز تُستخدم لإنشاء هيكل صفحات الويب.

شرح مفصل:

HTML ليست لغة برمجة، بل لغة ترميز.
تُستخدم لتحديد النصوص، الصور، الروابط، وغيرها.
الإصدار الحالي هو HTML5.

مثال:


                            
                            
                            
                                
                                مرحبًا بالعالم
                            
                            
                                مرحبًا بالعالم!

الدرس الثاني: بنية وثيقة HTML

كل صفحة HTML لها هيكل أساسي.

شرح مفصل:

: يُحدد الإصدار.
: العنصر الجذر.
: يحتوي على البيانات الوصفية.
: يحتوي على المحتوى المرئي.

مثال:


                            
                            
                            
                                
                                صفحتي
                            
                            
                                مرحبًا بكم في HTML.

الدرس الثالث: العناصر والصيغ

العناصر هي لبنات البناء في HTML.

شرح مفصل:

العناصر تُحاط بصيغ مثل .
بعض العناصر لا تحتاج إلى إغلاق مثل .

مثال:


                            عنوان رئيسي
                            هذه فقرة.

الدرس الرابع: السمات

السمات تُضيف معلومات إضافية للعناصر.

شرح مفصل:

تُكتب داخل صيغة الفتح مثل id="value".
أمثلة: id، class، src.

مثال:


                            مرحبًا

الدرس الخامس: الروابط والصور

إضافة تفاعلية وجاذبية باستخدام الروابط والصور.

شرح مفصل:

: لإنشاء روابط.

: لعرض الصور.

مثال:

اضغط هنا

الدرس السادس: القوائم

تنظيم المحتوى باستخدام القوائم.

شرح مفصل:

مثال:
تفاح موز الخطوة الأولى الخطوة الثانية

الدرس السابع: الرسوم المتحركة باستخدام CSS

تعلم كيفية إضافة الرسوم المتحركة إلى عناصر HTML باستخدام CSS.

شرح مفصل:

استخدام خاصية @keyframes لتعريف الرسوم المتحركة.
استخدام animation لتطبيق الرسوم المتحركة على العناصر.
تخصيص مدة الرسوم المتحركة باستخدام animation-duration.

مثال:

الدرس الثامن: إنشاء أزرار مخصصة

تعلم كيفية تصميم أزرار مخصصة باستخدام CSS.

شرح مفصل:

استخدام خاصيات مثل border-radius لجعل الأزرار مستديرة.
إضافة تأثيرات عند التمرير باستخدام :hover.
استخدام box-shadow لإضافة ظل للأزرار.

مثال:

الدرس التاسع: إنشاء القوائم المنسدلة

تعلم كيفية إنشاء قوائم منسدلة باستخدام HTML وCSS.

شرح مفصل:

استخدام عنصر select وoption لإنشاء قائمة منسدلة.
تخصيص مظهر القائمة باستخدام CSS.
إضافة خيارات متعددة داخل القائمة.

مثال:

الدرس العاشر: إضافة أيقونات باستخدام Font Awesome

تعلم كيفية استخدام مكتبة Font Awesome لإضافة أيقونات إلى صفحات الويب.

شرح مفصل:

إضافة مكتبة Font Awesome إلى المشروع باستخدام رابط CDN.
استخدام عناصر i أو span لإضافة الأيقونات.
تخصيص حجم ولون الأيقونات باستخدام CSS.

مثال:

الدرس الحادي عشر: العناصر الدلالية

تحسين قابلية القراءة باستخدام العناصر الدلالية.

شرح مفصل:

: رأس الصفحة.
: تذييل الصفحة.

مثال:

الدرس الثاني عشر: استخدام الوسائط المتعددة

إضافة الفيديوهات والصوتيات إلى صفحات الويب.

شرح مفصل:

لعرض الفيديوهات.
لتشغيل الصوتيات.

مثال:

الدرس 13: استخدام الألوان والخطوط

تعلم كيفية تخصيص الألوان والخطوط في HTML باستخدام CSS.

شرح مفصل:

استخدام خاصية color لتغيير لون النصوص.
استخدام خاصية font-family لتغيير نوع الخط.

مثال:


                            هذا نص أحمر بخط Arial.

الدرس 14: الروابط الداخلية والخارجية

تعلم كيفية إنشاء روابط داخلية وخارجية.

شرح مفصل:

الروابط الداخلية تُستخدم للتنقل داخل نفس الصفحة.
الروابط الخارجية تُستخدم للتنقل إلى صفحات أخرى.

مثال:


                            اذهب إلى القسم الأول
                            رابط خارجي

الدرس 15: الصور التفاعلية

إضافة تأثيرات تفاعلية على الصور باستخدام CSS.

شرح مفصل:

استخدام خاصية hover لتغيير مظهر الصورة عند التمرير.

مثال:

الدرس 16: النماذج المتقدمة

تعلم كيفية إنشاء نماذج متقدمة تحتوي على قوائم منسدلة وخيارات متعددة.

شرح مفصل:

استخدام select وoption لإنشاء قوائم منسدلة.
استخدام checkbox وradio لإنشاء خيارات متعددة.

مثال:


                            
                                اختر مدينتك:
                                
                                

                                 قراءة
                                 ذكر

الدرس 17: الرسوم التوضيحية باستخدام SVG

تعلم كيفية إنشاء رسوم توضيحية باستخدام SVG.

شرح مفصل:

SVG هي لغة لإنشاء الرسوم التوضيحية المتجهة.

مثال:

الدرس 18: تحسين محركات البحث (SEO)

تعلم كيفية تحسين صفحات HTML لمحركات البحث.

شرح مفصل:

استخدام العناصر الدلالية مثل header وarticle.
إضافة وصف ميتا باستخدام meta.

مثال:

الدرس 19: التعامل مع الأخطاء

تعلم كيفية اكتشاف وتصحيح الأخطاء في صفحات HTML.

شرح مفصل:

استخدام أدوات المتصفح لفحص العناصر.
التحقق من صحة الكود باستخدام أدوات مثل W3C Validator.

الدرس 20: إنشاء صفحة تفاعلية

تعلم كيفية إضافة تفاعلية باستخدام JavaScript.

شرح مفصل:

إضافة أحداث مثل النقر باستخدام JavaScript.

مثال:

الدرس 21: إنشاء صفحة متعددة اللغات

تعلم كيفية دعم لغات متعددة في صفحات HTML.

شرح مفصل:

استخدام خاصية lang لتحديد اللغة.

مثال:


                            
                                Hello, World!

الدرس 22: مشروع نهائي

إنشاء موقع ويب بسيط يحتوي على جميع المفاهيم التي تعلمتها.

شرح مفصل:

إنشاء صفحة رئيسية وصفحات فرعية.
إضافة روابط، صور، ونماذج.